<template>
  <!-- 预览试卷 -->
  <div id="preview-test-paper">
    <div class="preview-top">
      <div class="preview-title">
        <span class="printing-title">考试名称：{{ resData.paperName }}</span>
      </div>
      <div class="preview-text">
        <span>总分数：{{ resData.score }}分</span>
        <span>考试时间：{{ resData.timeLength }}分钟</span>
      </div>
    </div>
    <div class="jx-content preview-content">
      <!-- <span class="printing-notice">提示：学生作答时，每个学生的答题类型的答题顺序相同，每个类型中答题的顺序不相同。</span> -->
      <div v-for="(item,index) in resData.content" :key="index">
        <h2 class="tq-title">{{ questionNumber[index] }}、{{ questionName.find(x=>x.type==item.type).name }}(每题{{ item.score }}分，共{{ item.content.length }}题)</h2>
        <dl v-for="(item2,index2) in item.content" :key="index2">
          <dt class="printingfs14 markdown-body">
            {{ index2+1 }}.
            <span v-html="item2.content"></span>
            <!-- 选择题 单选多选 -->
            <span v-if="item.type == 1">
              <span v-if="!item2.isMultipleChoice">[单选题]</span>
              <span v-if="item2.isMultipleChoice">[多选题]</span>
            </span>
            <!-- 括号 选择题判断题显示括号 -->
            <span v-if="item.type <= 2">(&nbsp;&nbsp;&nbsp;&nbsp;)</span>
            ({{ item.score }}分)
            <!-- 简答题加4个换行 -->
            <div v-if="item.type == 4">
              <br /><br /><br /><br />
            </div>
          </dt>
          <dd class="printing-abcd" v-if="item.type == 1" v-for="(item3,index3) in item2.choiceList" :key="index3">
            <div style="margin:10px 0;" v-html="qKey[index3] + '. ' + item3"></div>
          </dd>
        </dl>
      </div>
      <div class="btn-group">
        <!-- <div class="button-style" @click="submitData">保存</div> -->
        <div class="button-style" @click="downloadWord">
          <span class="download">下载试卷</span>
        </div>
        <el-tooltip class="item" effect="dark" content="请使用Microsoft word打开、编辑下载文件" placement="bottom">
          <i style="vertical-align: -1px;" class="iconfont icon-wenti-m c-blue fs18"></i>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
//导出word
import "../../../../static/wordExport/jquery.wordexport";
export default {
  data() {
    return {
      //上个页面接收的数据
      paramsData: [],
      //接收的题目列表
      resData: [],
      //选择题
      questionList1: null,
      //判断题
      questionList2: null,
      //填空题
      questionList3: null,
      //简答题
      questionList4: null,
      //编程题
      questionList5: null,
      qKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      questionNumber: ["一", "二", "三", "四", "五", "六"],
      questionName: [
        {
          type: 1,
          name: "选择题"
        },
        {
          type: 2,
          name: "判断题"
        },
        {
          type: 3,
          name: "填空题"
        },
        {
          type: 4,
          name: "简答题"
        },
        {
          type: 5,
          name: "编程题"
        },
        {
          type: 6,
          name: "实验题"
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getData();
    },
    tobase64() {
      let that = this;
      let img = document.getElementById("abc");
      img.setAttribute("crossOrigin", "anonymous");
      img.src =
        "http://172.16.100.39:10000/resources/markdown-picture/b5124a84a2d844c6807c7e927545c5f4.jpg";
      that.getBase64Image(img);
    },
    getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      console.log(img.width, img.height);
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var dataURL = canvas.toDataURL("image/png");
      console.log(dataURL, 666);
      return dataURL;
      // return dataURL.replace("data:image/png;base64,", "");
    },
    //下载word
    downloadWord() {
      let that = this;
      $("#preview-test-paper").wordExport(that.resData.paperName);
    },
    //接收数据
    getData() {
      let that = this;
      let storage = window.localStorage;
      let data = storage.getItem("paperId");
      that.paramsData = JSON.parse(data);
      console.log(that.paramsData, "paperId");
      that.getPaper();
      return;
    },
    pToSpan(str) {
      //let str = '<p><b>123123<b/></p>';
      //let reg = /<[^>]*>|<\/[^>]*>/gm;
      //let reg = /<([\/]?)(p)((:?\s*)(:?[^>]*)(:?\s*))>/g;
      let reg1 = /<p>/g;
      let reg2 = /<\/p>/g;
      //let result = str.replace(reg,'<$1span$3>');
      let result = str.replace(reg1, "<span>");
      result = result.replace(reg2, "</span>");
      console.log(result, 999);
      return result;
    },
    //获取试题
    getPaper() {
      var that = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            that.paramsData +
            "/paper"
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.data.data, 123);
              that.resData = res.data.data;
              //that.resData.score = that.paramsData.score;
              let content = that.resData.content;
              //替换填空题括号
              //填空题替换(+)为（）
              $.each(content, function(i, d) {
                if (d.type == 3) {
                  console.log(d, 1122334);
                  $.each(d.content, function(i2, d2) {
                    let str = d2.content;
                    var result = str.replace(
                      /\(\+\)/g,
                      "（&nbsp;&nbsp;&nbsp;&nbsp;）"
                    ); //把(+)替换成()
                    d2.content = result;
                  });
                }
              });
              //所有p标签替换为span
              let pstr = JSON.stringify(that.resData);
              let result = that.pToSpan(pstr);
              result = JSON.parse(result);
              //console.log(result,66666);
              that.resData = result;
              //console.log(that.resData, 666);
              console.log(that.resData, 666);
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
body {
  background: #f8f8f8;
}
#preview-test-paper {
  img{
    max-width:80%;
  }
  background: #f8f8f8;
  .underline {
    text-decoration: underline;
  }
  .font16 {
    font-size: 16px;
    line-height: 40px;
  }
  .c-blue {
    color: $blue;
  }
  .c-btnblue {
    color: $btn-blue;
  }
  .c-red {
    color: #ff4240;
  }
  .printing-title {
  }
  .printing-notice {
    color: #1277eb;
  }
  .preview-top {
    width: 1200px;
    height: 335px;
    margin: 20px auto 0;
    text-align: center;
    box-sizing: border-box;
    padding-top: 74px;
    color: #fff;
    background: #fff url("../../../assets/images/previewTestPaper-bg.png")
      no-repeat 0 0;
    background-size: contain;
    .preview-title {
      font-size: 40px;
    }
    .preview-text {
      font-size: 18px;
      margin-top: 16px;
      > span {
        margin: 0 5px;
      }
    }
  }
  .preview-content {
    width: 1200px;
    margin: 0px auto 20px;
    color: $title-gray;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    p {
      display: inline;
    }
    .tq-title {
      color: $title-gray;
      font-size: 16px;
      line-height: 40px;
    }
    dl {
      padding-left: 20px;
    }
    dt,
    dd {
      font-size: 14px;
      line-height: 30px;
    }
    dd {
      padding-left: 20px;
    }
    .btn-group {
      text-align: center;
      .button-style {
        margin: 40px 5px;
      }
    }
  }
}
</style>
